<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="vuex_table_title || '新闻中心'"></fa-navbar>
		<!-- 轮播图 -->
		<view class="swiper_center">
			<u-swiper :title="true" border-radius="0" height="360"  :list="businessList" @click="openPage"></u-swiper>
		</view>
		<view class="newsBody" v-for="(item,index) in archivesList" :key="index" @click="goDetail(item)">
			<view class="newsTitle">
				<view class="newsAfter"></view>
				<view class="newsTxt u-line-1" >
					{{item.title}}
				</view>
			</view>
			<view class="newsMain u-line-1">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 为空 -->
		<view class="u-m-t-60 u-p-t-60" v-if="is_empty">
			<u-empty text="暂无内容展示" mode="list"></u-empty>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-30" v-if="archivesList.length"><u-loadmore bg-color="#f4f6f8" :status="status" /></view>
	</view>
</template>

<script>
export default {
	computed: {
		businessList() {
			console.log(this.vuex_config.newsList,'this.vuex_config.newsList')
			console.log(this.vuex_config,'newsList')
			if (this.vuex_config.newsList) {
				return this.vuex_config.newsList;
			}
			return [];
		}
	},
	data() {
		return {
			tabwidth: 40,
			current: 0,
			status: 'nomore',
			page: 1,
			channel_id: 0,
			filterList:[],
			orderList:[],
			archivesList: [],
			is_show:false,
			has_more: false,
			scrollTop: 0,
			is_update: false,
			params: {},
			query:{},
			isTab: false,
			tabList: [],
			is_empty:false,
			channel:{},
		};
	},
	onLoad(e) {
		let query = e;
		if (JSON.stringify(query) == '{}') {
			query = e;
		}
		if(query && JSON.stringify(query) != '{}'){
			this.params = query;
		}else{
			this.params = {
				channel:26,
				model:-1
			}
		}
		this.getCategory();		
		this.getArchives();
	},
	onShow() {
		// #ifdef MP-BAIDU
		if(this.channel){
			this.setPagesInfo();
		}		
		// #endif					
	},
	methods: {
		change(index) {
			//重设Bar宽度
			this.tabwidth = this.$util.strlen(this.tabList[index].title) * 30;
			this.current = index;
			this.channel_id = this.tabList[index].id;
			this.is_update = true;
			this.page = 1;
			this.getArchives();
		},
		goOrderBy(e){
			this.page = 1;
			this.is_update = true;
			this.query = e;
			this.getArchives();
		},
		getArchives: async function() {
			let data = {
				page: this.page,				
				...this.params,
				...this.query
			};			
			if (this.channel_id) {
				data.channel = this.channel_id;
			}			
			let res = await this.$api.getArchives(data);
			this.status = 'nomore';
			uni.stopPullDownRefresh();
			if (!res.code) {
				return;
			}
			
			let {filterList,orderList,pageList,channel} = res.data;
			this.filterList = filterList;
			this.orderList = orderList;
			this.channel = channel;
			// #ifdef MP-BAIDU
			if(this.channel){
				this.setPagesInfo();
			}
			// #endif
			if (this.is_update) {
				this.is_update = false;
				this.archivesList = [];
			}
			this.is_show = true;
			this.has_more = pageList.current_page<pageList.last_page;
			this.archivesList = [...this.archivesList, ...pageList.data];
			this.is_empty = !this.archivesList.length;
		},
		// #ifdef MP-BAIDU
		setPagesInfo() {
			swan.setPageInfo({
				title:this.channel.seotitle,
				keywords: this.channel.keywords,
				description:this.channel.description,
				releaseDate: this.$u.timeFormat(this.channel.createtime, 'yyyy-mm-dd hh:MM:ss'),
				image: this.channel.image,			
				success: res => {
					console.log('setPageInfo success', res);
				},
				fail: err => {
					console.log('setPageInfo fail', err);
				}
			});
		},
		// #endif
		getCategory() {
			this.$api.getCategory({ ...this.params }).then(res => {
				if (res.code == 1) {
					this.tabList = res.data;
					this.isTab = true; //百度小程序要先有值
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		openPage(index) {
			let path = this.bannerList[index].url;
			if (path == '/' || !path) {
				return;
			}
			if (['p','i','o'].includes(path.substr(0, 1))) {
				path = '/' + path;
			}
			if (path.indexOf('http') != -1) {
				this.$u.vuex('vuex_webs', this.bannerList[index]);
				path = '/pages/webview/webview';				
			}
			let data = {},
			arr = path.split('?');
			if(arr[1]){
				let q = arr[1].split('&');
				for(let item of q){
					let param = item.split('=');
					data[param[0]] = param[1];
				}
			}
			this.$u.route(arr[0],data);
		},
		goDetail(item) {
			this.$u.route('/pages/article/detail', {
				id: item.id,
				tap:1
			});
		}

	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//下拉刷新
	onPullDownRefresh() {		
		this.is_update = true;
		this.page = 1;
		this.getArchives();
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page = ++this.page;
			this.getArchives();
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f1f1f1;
	color: balck;
	.swiper_box{
		width: 100%;
		height: 350rpx;
		position: relative;
		.swiper_center{
			width: 700rpx;
			height: 200rpx;
			background-color: #d9001b;
		}
		.swiper_bgbox {
			width: 100%;
			height: 250rpx;
			position: absolute;
			background-color: #d9001b;
			border-radius: 0 0 30rpx 30rpx;
		}
	}
	.conter{
		height: 300rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		.person {
			width: 100%;
			display: flex;
			align-items: center;
			overflow-y: auto;
			flex-wrap: nowrap;
			white-space: nowrap;
			.person_box {
				width: 250rpx;
				height: 300rpx;
				background-color: white;
				font-size: 22rpx;
				color: #b1b1b1;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 20rpx;
				margin: 20rpx 0 0 20rpx;
				.person_name {
					font-size: 30rpx;
					color: black;
					font-weight: bold;
				}
			}
		}
	}
	.newsBody {
		width: 100%;
		height: 100rpx;
		background-color: white;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		.newsTitle {
			width: 80%;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 10rpx;
			.newsAfter {
				width: 20rpx;
				height: 28rpx;
				margin: 0 10rpx;
				background-color: #d9001b;
			}
		}
		.newsMain {
			padding: 0 35rpx;
		}
	}
	.person_duty{
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.newsTxt {
		width: 450rpx;
	}
}
</style>
